<template>
  <div>
    <div class="mb10">是否支持：{{isSupported}}</div>
    <el-button @click="show">打开消息</el-button>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue';
import { useWebNotification } from '@vueuse/core';
export default {
  name: '',
  props: {},
  components: {},
  setup(props, { emit }) {
    const options = {
      title: '这是一条消息！',
      body: '内容',
      dir: 'auto',
      lang: 'zh-cn',
      renotify: false,
      tag: '01',
    };
    const { isSupported, show } = useWebNotification(options);
    function initState() {
      return {
        test: '',
      };
    }
    const state = reactive(initState());
    return {
      ...toRefs(state),
      show,
      isSupported,
    };
  },
};
</script>